﻿@model MvcApplication1.Models.DonDangKyDichVuModel
@{
    ViewBag.Title = "DichVuHoTroSanPham";
    Layout = "~/Views/MasterPage/Main.cshtml";
    ViewBag.ActiveIndex = 2;
}

<div class="left-content">			
	<nav class="subnav">
		<h4>Hỗ trợ</h4>
		<ul>
			<li><a href="javascript:void(0);">Hỗ trợ của tôi</a></li>
			<li><a href="javascript:void(0);">Hướng dẫn sử dụng</a></li>
			<li><a href="javascript:void(0);">Video hướng dẫn và Trợ giúp</a></li>
			<li><a href="javascript:void(0);">Câu hỏi thường gặp</a></li>
			<li><a href="javascript:void(0);">Dịch vụ sửa chữa</a></li>
			<li class="current"><a href="javascript:void(0);" class="selected">Liên hệ với chúng tôi</a></li>
			<li><a href="javascript:void(0);">Thông báo</a></li>
		</ul>
		<div class="contact-phone">
			<p>Gọi cho Trung tâm hỗ trợ khách hàng Anh Hoa</p>
			<p><strong>01669331582</strong></p>
		</div>
	</nav>
</div>

<div class="right-content">
    <h2>Dịch vụ sửa chữa</h2>
	<p>Sản phẩm của bạn ngoài hạn bảo hành? Chúng tôi vẫn có thể trợ giúp để bạn có được lựa chọn tốt nhất.</p>
	<nav class="tab-list">
        @Html.ActionLink("Đặt lịch sửa chữa", "DangKySuaChuaSanPham", null, new { @class = "active tab" })
        @Html.ActionLink("Theo dõi tình trạng sửa chữa", "TheoDoiTinhTrangSuaChua", null, new { @class = "tab" })
        @Html.ActionLink("Thắc mắc & Giải đáp", "ThacMacVaGiaiDap", null, new { @class = "tab" })
	</nav>
				
    @using (Html.BeginForm("DangKySuaChuaSanPham", "DichVuHoTro"))
    {
        <h3>Đặt lịch sửa chữa</h3>
	<div class="session session-1">
        <h4>Nhập thông tin sản phẩm</h4>
        <div>
            <div class="control-group">
                <label>Chọn loại sản phẩm</label>
                @Html.DropDownList("TenMucSp", ViewBag.DsLoaiSanPham as SelectList,"Chọn danh mục sản phẩm", new { @class = "loaisanpham-dropdown" })
            </div>
            <script>
                $('.loaisanpham-dropdown').change(function () {
                    var self = this;
                    $.ajax({
                        url: '/DichVuHoTro/GetDsSanPham',
                        type: "POST",
                        data: {
                            loaiSanPhamId: self.value
                        }
                    }).done(function (rep) {
                        var items = '<option>Chọn sản phẩm</option>';
                        $.each(rep.Result, function (i, product) {
                            items += "<option value='" + product.Id + "'>" + product.Name + "</option>";
                        });
                        $('#sanPhamId').html(items);
                    });
                });
                
            </script>
            <div class="control-group">
                <label>Chọn sản phẩm</label>
                <select id="sanPhamId" name="sanPhamId"><option>Chọn sản phẩm</option></select>
            </div>
            <div class="control-group">
                <label>Ngày mua</label>
                @Html.TextBoxFor(u => u.ngayDangKy, new { type = "date" })
            </div>
            <div class="control-group">
                <label>Ngày đăng ký sửa chữa</label>
                @Html.TextBoxFor(u => u.ngayDangKySuaChua, new { type = "date" })
            </div>
        </div>
    </div>
    <div class="session session-2">
        <h4>Mô tả vấn đề</h4>
        <div class="control-group">
            <label>Mô tả</label>
            @Html.TextAreaFor(u => u.moTaChiTiet, new { @class = "problem-decription" })
        </div>
    </div>
    <div class="actions">
        <input type="submit" value="Tiếp" />
    </div>
    }
	
</div>